<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .ui-datatable .ui-datatable-footer {
                text-align:left;
            }
        </style>
    </ui:define>

    <ui:define name="content">
        <h1 class="title ui-widget-header ui-corner-all">DataTable - Multiple Row Selection</h1>
        <div class="entry">
            <p>DataTable also supports multiple row selection using metaKey and shiftKey.</p>

            <h:form id="form">

                <p:dataTable var="car" value="#{tableBean.carsSmall}" rowKey="#{car.model}"
                             selection="#{tableBean.selectedCars}" selectionMode="multiple">

                    <f:facet name="header">
                        Click "View" button after selecting multiple to see details
                    </f:facet>

                    <p:column headerText="Model">
                        #{car.model}
                    </p:column>

                    <p:column headerText="Year">
                        #{car.year}
                    </p:column>

                    <p:column headerText="Manufacturer" >
                        #{car.manufacturer}
                    </p:column>

                    <p:column headerText="Color">
                        #{car.color}
                    </p:column>

                    <f:facet name="footer">
                        <p:commandButton value="View" image="ui-icon ui-icon-search" update="form:display" oncomplete="carDialog.show()"/>
                    </f:facet>
                </p:dataTable>

                <p:dialog header="Car Detail" widgetVar="carDialog"
                          width="250" showEffect="explode" hideEffect="explode">

                    <p:dataList id="display" value="#{tableBean.selectedCars}" var="selectedCar" type="definition">
                        Model: #{selectedCar.model}, Year: #{selectedCar.year}
                        <f:facet name="description">
                            <p:graphicImage value="/images/cars/#{selectedCar.manufacturer}.jpg"/>
                        </f:facet>
                    </p:dataList>
                    
                </p:dialog>

            </h:form>

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="datatableRowSelectionMultiple.xhtml">
<pre name="code" class="xml">
&lt;h:form id="form"&gt;

    &lt;p:dataTable var="car" value="\#{tableBean.smallCarsModel}" rowKey="\#{car.model}"
                 selection="\#{tableBean.selectedCars}" selectionMode="multiple"&gt;

        &lt;f:facet name="header"&gt;
            Click "View" button after selecting multiple to see details
        &lt;/f:facet&gt;

        &lt;p:column headerText="Model"&gt;
            \#{car.model}
        &lt;/p:column&gt;

        &lt;p:column headerText="Year"&gt;
            \#{car.year}
        &lt;/p:column&gt;

        &lt;p:column headerText="Manufacturer" &gt;
            \#{car.manufacturer}
        &lt;/p:column&gt;

        &lt;p:column headerText="Color"&gt;
            \#{car.color}
        &lt;/p:column&gt;

        &lt;f:facet name="footer"&gt;
            &lt;p:commandButton value="View" image="ui-icon ui-icon-search"
                        update="form:display" oncomplete="carDialog.show()"/&gt;
        &lt;/f:facet&gt;
    &lt;/p:dataTable&gt;

    &lt;p:dialog header="Car Detail" widgetVar="carDialog"
              width="250" showEffect="explode" hideEffect="explode"&gt;

        &lt;p:dataList id="display"
            value="\#{tableBean.selectedCars}"
            var="selectedCar" type="definition"&gt;

            Model: \#{selectedCar.model}, Year: \#{selectedCar.year}
            &lt;f:facet name="description"&gt;
                &lt;p:graphicImage value="/images/cars/\#{selectedCar.manufacturer}.jpg"/&gt;
            &lt;/f:facet&gt;
        &lt;/p:dataList&gt;

    &lt;/p:dialog&gt;

&lt;/h:form&gt;
            </pre>
                </p:tab>

                <p:tab title="TableBean.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.UUID;

import org.primefaces.examples.domain.Car;

public class TableBean {

    static {
		colors = new String[10];
		colors[0] = "Black";
		colors[1] = "White";
		colors[2] = "Green";
		colors[3] = "Red";
		colors[4] = "Blue";
		colors[5] = "Orange";
		colors[6] = "Silver";
		colors[7] = "Yellow";
		colors[8] = "Brown";
		colors[9] = "Maroon";

		manufacturers = new String[10];
		manufacturers[0] = "Mercedes";
		manufacturers[1] = "BMW";
		manufacturers[2] = "Volvo";
		manufacturers[3] = "Audi";
		manufacturers[4] = "Renault";
		manufacturers[5] = "Opel";
		manufacturers[6] = "Volkswagen";
		manufacturers[7] = "Chrysler";
		manufacturers[8] = "Ferrari";
		manufacturers[9] = "Ford";
	}

    private final static String[] colors;

	private final static String[] manufacturers;

	private List&lt;Car&gt; carsSmall;

	private Car[] selectedCars;

	public TableBean() {
		carsSmall = new ArrayList&lt;Car&gt;();

		populateRandomCars(carsSmall, 9);
	}

    private void populateRandomCars(List&lt;Car&gt; list, int size) {
		for(int i = 0 ; i &lt; size ; i++)
			list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(), getRandomColor()));
	}

	public Car[] getSelectedCars() {
		return selectedCars;
	}
	public void setSelectedCar(Car[] selectedCars) {
		this.selectedCar = selectedCars;
	}

    public List&lt;Car&gt; getCarsSmall() {
        return this.carsSmall;
    }
}
                    </pre>
                </p:tab>

            </p:tabView>

        </div>

    </ui:define>
</ui:composition>
